<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/antd.min.css">
    <script src="js/vue.min.js"></script>
    <script src="js/antd.min.js"></script>
</head>

<body>
    <div id="app" style="width: 60%;margin: 20px auto;">
        <a href="login.html"><a-button type="primary">退出</a-button></a>
        <h1>搜索用户</h1>
        <p>
            <a-input v-model="selectKey" placeholder="请输入查询关键字">
        </p>
        <p>
        <table class="table table-hover">
            <tr class="info">
                <td>编号</td>
                <td>名字</td>
                <td>年龄</td>
                <td>详情</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item,index) in Filterlist">
                <td> {{item.id}} </td>
                <td> {{item.name}} </td>
                <td> {{item.age}} </td>
                <td> {{item.info}} </td>
                <td>
                    <a-button type="primary" v-on:click="delinfo(index)">删除</a-button>
                </td>
            </tr>
        </table>
        <hr>
        <fieldset style="width: auto; height: auto;">
            <legend>新增</legend>
           <p><a-input type="text" v-model="userid" placeholder="请输入用户编号"><span>{{useridTip}}</span></p> 
            <p><a-input type="text" v-model="username" placeholder="请输入用户姓名"><span>{{usernameTip}}</span></p>
            <p><a-input type="text" v-model="userage" placeholder="请输入用户年龄"><span>{{userageTip}}</span></p>
            <p><a-input type="text" v-model="userinfo" placeholder="请输入用户年龄"><span>{{userageTip}}</span></p>
            <!-- <input type="button" value="保存" v-on:click="save()"> -->
            <a-button type="primary"v-on:click="save()" v-on:click="delinfo(index)">保存</a-button>
        </fieldset>
        
        </p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                userid:"",
                username:"",
                userage:"",
                useridTip:"",
                usernameTip:"",
                userageTip:"",
                userinfo:"",
                list: [{
                    id: 1,
                    name: "小明",
                    age: 8,
                    info: "g帆帆帆帆帆帆帆帆"
                }, {
                    id: 2,
                    name: "王五",
                    age: 8,
                    info: "水水水水水水水水水水水"
                }, {
                    id: 3,
                    name: "李四",
                    age: 8,
                    info: "烦烦烦烦烦烦烦烦烦方法"
                }, {
                    id: 4,
                    name: "是",
                    age: 8,
                    info: "asdf"
                }],
                selectKey: ""
            },
            computed: {
                Filterlist: function () {
                    var _this = this;
                    return _this.list.filter(function (val) {
                        return val.name.indexOf(_this.selectKey) != -1;
                    });
                }
            },
            methods: {
                delinfo: function (val) {
                    if (confirm("确认删除？")) {
                        this.list.splice(val, 1);
                        this.message.success("删除成功");
                    }
                },
               
                save:function(){
                    this.list.push({
                        id: this.userid,
                        name: this.username,
                        age: this.userage,
                        info:this.userinfo,
                    });
                }
            }
        });
    </script>
</body>

</html>